<template>
  <div class="container width1200">
    <div class="title">
      <span>欢迎进入管理服务平台</span>
      <div >
        <i class="el-icon-user"></i>
        <span style="margin-left:10px;color:#999999">{{userInfo.userVO.applyType == '0' ? '个人用户:':'企业用户:'}}</span>
        <span style="color:#333333">{{userInfo.userVO.applicantName }}</span>
        <!-- <el-button @click="loginOut" size="mini" style="margin-left: 10px;">退出</el-button> -->
      </div>
    </div>
    <div class="bj">
      <img src="../assets/bj1.png" height="200" style="width: 100%;" alt="">
    </div>
    <div class="main">
      <div class="ssnyd-desc">
        <div>
          <span style="margin-right: 5px;">
            <img src="../assets/db1.png" height="15" style="margin-bottom: 10px;" alt="">
          </span>
          <span style="font-size: 18px;">当前位置：在线办理>设施农用地</span>
        </div>
      </div>
      <div class="ssnyd">
        <div class="name">设施农用地</div>
        <el-divider></el-divider>
        <div class="ssnyd-desc">
          <div>
            <span style="font-size: 20px;">提醒：带</span>
            <span style="margin-right: 5px;">
              <img style="margin-bottom: 15px;" src="../assets/star.png" height="10" alt="">
            </span>
            <span style="font-size: 20px;">为必要材料，您必须提交才能申报。</span>
          </div>
        </div>
      </div>
      <div class="xmxx">
        <div class="name">项目信息</div>
        <el-divider></el-divider>
        <el-form :inline="true" label-width="150px" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名/企业名称：" prop="applicantName">
            <span>{{currentProject.applicantName || ''}}</span>
          </el-form-item>
          <el-form-item label="联系电话：" prop="telephone">
            <span>{{currentProject.telephone}}</span>
          </el-form-item>
          <el-form-item label="项目名称：" prop="projectNo">
            <span>{{currentProject.projectName || '项目名称'}}</span>
          </el-form-item>
          <el-form-item label="项目申请号:" prop="projectNo">
            <span>{{currentProject.projectNo || '请选择项目'}}</span>
          </el-form-item>
          <el-form-item label="勘界技术单位:" prop="companyName">
            <el-input style="width:300px" size="mini" v-model="formInline.sbdw" placeholder="请输入勘界技术单位"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="sczl">
        <div class="name">上传相关材料</div>
        <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
          <el-table-column label="序号" type="index" width="80" align="center">
          </el-table-column>
          <el-table-column prop="date" label="材料名称" width="180">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.star" style="margin-right: 5px;"><img src="../assets/star.png" alt=""></span>
                <span>{{ scope.row.date }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="样表下载" width="180" align="center">
            <template slot-scope="scope">
              <el-button type="text" style="color: #0c7cff;" @click="dowload(scope.row)"><span>{{ scope.row.name }}</span></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="files" label="文件名" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.files.length>0">
                <span class="file-item" v-for="(item,idx) in scope.row.files" :key="'files'+idx">
                  <span class="file-item-text">{{item.originalFilename}}</span>
                  <i class="el-icon-circle-close" style="color:red;" @click="deleteFile(item)"></i>
                </span>
              </div>              
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button :disabled='!disabled' type="text" @click="uploadZl(scope.row)">上传资料</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="form-footer">
      <el-button size="small" @click="back">返回</el-button>
      <el-button :disabled='!disabled' size="small" type="primary" @click="saveButtonClicked">提交</el-button>
    </div>
    <UploadDialog ref="UploadDialog" @success='uploadSuccess'/>
  </div>
</template>

<script>
import UploadDialog from './UploadDialog.vue'
import service from '@/apiService/apiService'

export default {
  components: {
    UploadDialog
  },
  data() {
    return {
      names:[],
      activeName: 'second',
      isLoading:false,
      formInline: {
        projectNo:'',
      },
      tableData: [{
        date: '界址点.txt',
        star: true,
        fileType:'fj_jzd',
        notice:'请上传txt文件',
        files:[],
        limit:'.txt'
      }, {
        date: '勘界范围(CGCS2000投影坐标系)',
        star: true,
        fileType:'fj_kcfw',
        files:[],
        notice:'请上传有坐标系文件的压缩包文件',
        limit:'.zip'
      }, {
        date: '分类面积表（涉及地类追溯的补充说明）',
        fileType:'fj_flmjb',
        files:[],
        notice:'请上传xlsx/xls文件',
        limit:'.xls,.xlsx'
      }, {
        date: '平面布局图',
        fileType:'fj_pmbjt',
        star: true,
        files:[],
        notice:'请上传图片',
        limit:'.png,.pdf,.jpg'
      },
      {
        date: '现场照片',
        fileType:'fj_xczp',
        star: true,
        files:[],
        notice:'请上传图片',
        limit:'.png,.jpg'
      },
      {
        date: '设施农业用地使用协议',
        address: '设施农业用地使用协议.docx',
        name: '下载模板',
        fileType:'fj_ssnyydsyxy',
        star: true,
        files:[],
        notice:'请上传设施农业用地使用协议',
        limit:'.pdf,.doc,.docx',
        dowloadId:'syxyId',
        downloadFileName:'设施农业用地使用协议.docx',
      },
      {
        date: '土地流转合同（涉及土地流转提供）',
        name: '下载模板',
        fileType:'fj_tdlzht',
        files:[],
        notice:'请上传土地流转合同',
        limit:'.pdf,.doc,.docx',
        dowloadId:'zrhtId',
        downloadFileName:'重庆市农村土地承包经营权出让转包转让合同（样本）.docx',
      },
      {
        date: '土地复垦方案（农业农村部门认定大型养殖场）',
        fileType:'fj_tdfkfa',
        files:[],
        notice:'请上传土地复垦方案',
        limit:'.pdf,.doc,.docx'
      },{
        date: '项目公告材料',
        fileType:'fj_xmggcl',
        files:[],
        star: true,
        notice:'请上传项目公告材料',
        limit:'.pdf,.doc,.docx,.png,.jpg'
      },{
        date: '土地利用现状图',
        star: true,
        fileType:'fj_tdlyxzt',
        files:[],
        notice:'请上传土地利用现状图',
        limit:'.png,.pdf,.jpg'
      },
      ],
      projectList:[],
      userInfo:{
        userVO:{},
        projectVOs:[]
      },
      disabled:true,
      currentProject:{},
    }
  },
  mounted(){
    let user = window.localStorage.getItem('userInfo')
    this.userInfo = JSON.parse(user)
    // this.getProjectList()
    let project = window.localStorage.getItem('currentProject')
    this.currentProject = JSON.parse(project)
    this.formInline = {...this.currentProject}
    this.loadProjectDetail()
    this.loadProjectInfo()
  },
  methods: {
    loginOut(){
      this.$confirm('确认退出登录？').then(_ => {
        window.localStorage.clear()
        this.$router.replace('/')
      }).catch(_ => {

      });
    },
    back(){
      this.$router.back()
    },
    projectChange(val){
      this.currentProject = this.projectList.find(item=>item.projectNo==val)
      this.loadProjectDetail()
    },
    uploadZl(val) {
      // debugger
      this.$refs.UploadDialog.show(val.fileType,this.formInline.projectNo,val.notice,val.limit || '')
    },
    checkData(){
      for(let i = 0; i < this.tableData.length;i ++){
        let item = this.tableData[i]
        if(item.star == true && item.files.length == 0){
          this.$message({
            message: `请上传${item.date}`,
            type: 'warning'
          });
          return false
        }
      }
      return true
    },
    saveButtonClicked(){
      // if (!this.formInline.sbdw) {
      //   this.$message({
      //     message: '请输入勘界技术单位',
      //     type: 'warning'
      //   });
      //   return
      // }
      if(!this.checkData()){
        return
      }
      this.isLoading = true
      service.editProject({
        id:this.currentProject.id,
        sbdw:this.formInline.sbdw
      }).then(res=>[
        this.saveData()
      ]).catch(err=>{
        this.isLoading = false
        this.$message({
          message: err,
          type: 'error'
        });
      })
      
    },
    saveData(){
      service.saveProjectData({
        projectNo:this.formInline.projectNo,
        jhlx:'correct',
        annexTypes:['fj_jzd','fj_flmjb','fj_pmbjt','fj_xczp','fj_ssnyydsyxy','fj_tdlzht','fj_tdfkfa','fj_kcfw','fj_xmggcl','fj_tdlyxzt']
      }).then(res=>{
        this.$message({
          message: '提交成功',
          type: 'success'
        });
        this.loadProjectDetail()
        this.loadProjectInfo()
      }).catch(err=>{
        this.isLoading = false
        this.$message({
          message: err,
          type: 'error'
        });
      })
    },
    uploadSuccess(){
      this.loadProjectDetail()
    },
    dowload(val){
      let fileId = this.userInfo.userVO[val.dowloadId]
      service.downloadFile(fileId).then(res=>{
        window.open(res.data.ylPath)
        // const link=document.createElement('a');
        // let blob =  res.data    //如果后台返回的直接是blob对象类型，直接获取数据
        // // let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，
        // link.style.display='none';	          
        // const url = window.URL || window.webkitURL || window.moxURL;
        // link.href= window.URL.createObjectURL(blob);
        // link.download = val.downloadFileName;   //下载的文件名称
        // link.click();
        // window.URL.revokeObjectURL(url);
      }).catch(err=>{
        console.log(err)
      })
    },
    getProjectList(){
      service.getProjectListData({
        pageSize: 1000,
        currentPage:0,
        // status:1,
        telephone:this.userInfo.userVO.telephone
      }).then(res=>{
        this.projectList = res.data.records
      })
    },
    loadProjectInfo(){
      service.getProjectInfoDetail(
        this.currentProject.id
      ).then(res=>{
        this.currentProject = res.data
        this.formInline = res.data
        this.disabled = this.currentProject.status == "1" || this.currentProject.status == "3"
      }).catch(err=>{

      })
    },
    loadProjectDetail(){
      this.isLoading = true
      // this.getProjectInfo(id)
      // let temp = this.projectList.find(item=>item.projectNo == this.formInline.projectNo)
      // this.disabled = temp.status == "1"
      let self = this
      service.getProjectFileList({
        projectNo:this.currentProject.projectNo,
        annexType:'fj_jzd,fj_flmjb,fj_pmbjt,fj_xczp,fj_ssnyydsyxy,fj_tdlzht,fj_sfzmcl,fj_tdfkfa,fj_kcfw,fj_xmggcl,fj_tdlyxzt'
      }).then(res=>{
        this.isLoading = false
        let data = res.data
        self.tableData[0].files = data.fj_jzd
        self.tableData[1].files = data.fj_kcfw
        self.tableData[2].files = data.fj_flmjb
        self.tableData[3].files = data.fj_pmbjt
        self.tableData[4].files = data.fj_xczp
        self.tableData[5].files = data.fj_ssnyydsyxy
        self.tableData[6].files = data.fj_tdlzht
        self.tableData[7].files = data.fj_tdfkfa
        self.tableData[8].files = data.fj_xmggcl
        self.tableData[9].files = data.fj_tdlyxzt

      }).catch(err=>{
        this.isLoading = false
        console.log(err)
      })
    },
    deleteFile(val){
      if (!this.disabled) {
        this.$message({
          message: '材料审批中，暂时无法删除',
          type: 'warning'
        });
        return
      }
      service.deleteFileForId(val.id).then(res=>{
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.loadProjectDetail()
      }).catch(err=>{

      })
    }
  }
}
</script>

<style scoped>
.xmxx {
  margin-bottom: 20px;
}

.file-item{
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-item-text{
  margin-right: 5px;
}

.el-input {
  width: 350px;
  /* 调整为所需的宽度 */
}

.container {
  /* height: 100vh;
  width: 100%;
  background-color: #aaa; */
}

.el-divider--horizontal {
  margin: 10px 0;
}

.ssnyd-desc {
  width: 100%;
  height: 56px;
  padding: 0 10px;
  line-height: 56px;
  margin-top: 20px;
  background: #F6F6F6;
  border-radius: 0px 0px 0px 0px;
  margin-bottom: 40px;
}

.name {
  font-weight: 500;
  font-size: 22px;
  color: #000000;
  line-height: 30px;
}

.header {
  display: flex;
  align-items: center;
  /* width: 100%; */
  height: 56px;
  padding: 0 150px;
  border: 1px solid #eee;
  margin-bottom: 18px;
}

.main {
  /* width: 100%; */
  height: 100%;
  padding: 0 150px;
  /* background-color: pink; */
}

.form-footer {
  height: 80px;
  line-height: 80px;
  margin-top: 10px;
  /* background-color: pink; */
  text-align: center;
  /* border-radius: 10px; */
}

.syName {
  color: #333;
  font-weight: bold;
  font-size: 18px;
}

.sy {
  padding: 5px 20px;
  color: #333;
  font-weight: bold;
  font-size: 18px;
}

.title {
  padding: 10px 150px;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.el-icon-user{
  border: solid 1px #333;
  border-radius: 20px;
  padding: 4px;
}
</style>